<template>
  <div>
    <!-- 新增弹出框 -->
    <a-modal
      :title="addModel.title"
      :visible="addModel.open"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="close"
      width="800px"
    >
      <a-form-model
       ref="ruleForm"
        :model="pageParams"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="试剂盒名称：" prop="kitName">
              <a-input
                v-model="pageParams.kitName"
                placeholder="请输入试剂盒名称"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="组分数：" prop="comNumber">
              <a-select
                v-model="pageParams.comNumber"
                placeholder="请选择组分数"
                style="width: 100%"
                @change="selectComNumber"
              >
                <a-select-option :value="0">未知</a-select-option>
                <a-select-option :value="1">1人份</a-select-option>
                <a-select-option :value="2">2人份</a-select-option>
                <a-select-option :value="3">3人份</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="采样类型：" prop="samplingType">
              <a-select
                v-model="pageParams.samplingType"
                placeholder="请选择采样类型"
                style="width: 100%"
              >
                <a-select-option
                  v-for="item in samplingTypeList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="来源：" prop="source">
              <a-input v-model="pageParams.source" placeholder="请输入URL/PMID/DOI" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <div v-for="(item, index1) in pageParams.list" :key="index1">
          <div class="box">
            <a-row>
              <a-col :span="10">
                <a-form-model-item
                  label="基因座："
                  :prop="'list.' + index1 + '.locusName'"
                  :rules="{
                    required: true,
                    message: '基因座不能为空',
                    trigger: 'blur',
                  }"
                >
                  <a-input
                    v-model="item.locusName"
                    placeholder="请输入基座名称"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row
              style="display: flex; align-items: center"
              v-for="(item1, index2) in item.alleleVoList"
              :key="index2"
            >
              <a-col :span="10">
                <a-form-model-item label="等位基因："  :prop="'list.' + index1 + '.alleleVoList.'+index2+'.allele'"
                 :rules="{
                    required: true,
                    message: '等位基因不能为空',
                    trigger: 'blur',
                  }"
                >
                  <a-input
                    v-model="item1.allele"
                    placeholder="请输入等位基因"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item label="峰面积：" :prop="'list.' + index1 + '.alleleVoList.'+index2+'.peakArea'"
                :rules="{
                    required: true,
                    message: '峰面积不能为空',
                    trigger: 'blur',
                  }"
                >
                  <a-input
                    v-model="item1.peakArea"
                    placeholder="请输入峰面积"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="2" style="display: flex">
                <a-form-model-item
                  style="margin-left: 10px"
                  v-show="index2 == item.alleleVoList.length - 1"
                >
                  <a-icon
                    type="plus-circle"
                    @click="addASlleleVoList(index1, index2)"
                  />
                </a-form-model-item>
                <a-form-model-item
                  style="margin-left: 10px"
                  v-show="index2 == item.alleleVoList.length - 1 && index2 != 0"
                >
                  <a-icon
                    type="minus-circle"
                    @click="deleteASlleleVoList(index1, index2)"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
          <div style="display: flex; justify-content: flex-end">
            <a-button
              type="primary"
              shape="circle"
              @click="addList"
              v-show="index1 == pageParams.list.length - 1"
            >
              <a-icon type="plus" />
            </a-button>
            <a-button
              type="primary"
              shape="circle"
              @click="deleteList(index1)"
              style="margin-left: 10px"
              v-show="index1 == pageParams.list.length - 1 && index1 != 0"
            >
              <a-icon type="minus" />
            </a-button>
          </div>
        </div>
        <a-form-model-item
          label="示例个体数据值"
          class="db"
          v-show="genotypes.length > 0"></a-form-model-item>
        <a-form-model-item
          :label="'示例个体数据值' + (index + 1) + '：'"
          class="db"
          v-for="(item, index) in pageParams.genotypes"
          :key="index"
          :prop="'genotypes.'+index+'.genotype'"
          :rules="{
                    required: true,
                    message: '峰面值不能为空',
                    trigger: 'blur',
                  }"
        >
          <a-input v-model="item.genotype" placeholder="请输入" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { addKitInfo, kitInfo } from "@/services/dataApi";
export default {
  props: {
    addModel: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      confirmLoading: false,
      genotypes: [],
      pageParams: {
        genotypes:[],
        kitName: "",
        comNumber: "",
        samplingType: "",
        source: "",
        list: [
          {
            locusName: "", //基因坐名称
            alleleVoList: [
              {
                allele: "", //等位基因
                peakArea: "", //峰面值
              },
            ],
          },
        ],
      },
      samplingTypeList: [
        { label: "血斑", value: 1 },
        { label: "唾液斑", value: 2 },
        { label: "汗斑", value: 3 },
        { label: "精斑", value: 4 },
        { label: "毛发", value: 5 },
        { label: "烟蒂", value: 6 },
        { label: "骨骼", value: 7 },
        { label: "牙齿", value: 8 },
        { label: "脱落上皮细胞", value: 9 },
        { label: "其他", value: 10 },
      ],
      rules: {
        kitName: [
          { required: true, message: "请输入试剂盒名称", trigger: "blur" },
        ],
        comNumber: [
          { required: true, message: "请选择组分数", trigger: "blur" },
        ],
        samplingType: [
          { required: true, message: "请输入采样类型", trigger: "blur" },
        ],
        source: [{ required: true, message: "请输入来源", trigger: "blur" }],
      },
    };
  },

  created() {
    if (this.addModel.kitId) {
      this.getInfo();
    }
  },

  methods: {
    getInfo() {
      kitInfo({ kitId: this.addModel.kitId }).then((res) => {
        if (res.retcode == "success") {
          this.pageParams.kitId = res.data.kitId;
          this.pageParams.kitName = res.data.kitName;
          this.pageParams.samplingType = res.data.samplingType;
          this.pageParams.source = res.data.source;
          this.pageParams.list = res.data.locusVoList;
          this.pageParams.comNumber = res.data.comNumber;
          this.pageParams.genotypes = res.data.locusVoList[0].genotypes || [];
        }
      });
    },
    selectComNumber() {
      this.pageParams.genotypes = [];
      for (let i = 0; i < parseInt(this.pageParams.comNumber); i++) {
        this.pageParams.genotypes.push({ genotype: "" });
      }
    },
    addList() {
      this.pageParams.list.push({
        locusName: "", //基因坐名称
        alleleVoList: [
          {
            allele: "", //等位基因
            peakArea: "", //峰面值
          },
        ],
      });
    },
    deleteList(index1) {
      this.pageParams.list.splice(index1, 1);
    },
    addASlleleVoList(index1) {
      this.pageParams.list[index1].alleleVoList.push({
        allele: "",
        peakArea: "",
      });
    },
    deleteASlleleVoList(index1, index2) {
      this.pageParams.list[index1].alleleVoList.splice(index2, 1);
    },
    handelData() {
      this.pageParams.list.forEach((item) => {
        item.genotypes = this.pageParams.genotypes;
      });
    },

    //提交
    handleOk() {
      this.handelData();
       this.$refs.ruleForm.validate(valid => {
        if (valid) {
       
        addKitInfo(this.pageParams).then((res) => {
        if (res.retcode == "success") {
          this.$emit("refresh");
          this.close();
          this.$message.success("操作成功");
        }
      });
        }
      });
      
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  margin: 10px 0;
  background: #f7f7f7ff;
  padding: 10px 10px;
  border-radius: 10px;
}
</style>